#{extends 'main.html' /}
#{set title:'Home' /}

#{set 'moreStyles'}
        #{stylesheet 'style3.css' /}
#{/set}

<script type="text/javascript">
$(document).ready(function(){
	$("select[name=user_categorie]").change(function(){
		if(this.value == "student"){
			$(".student-information").show();
		}else{
			$(".student-information").hide();
		}
	});
	$("#new_user_lastname,#new_user_firstname").keyup(function(){
		var firstname = $("#new_user_firstname").val().toLowerCase();
		var lastname = $("#new_user_lastname").val().toLowerCase();
		$("#new_user_email").val(firstname.charAt(0)+lastname+"@iut.univ-paris8.fr");	
	});
	$("#form_register").submit(function(){
		var goodCredentials = $("#new_user_password").val() == $("#new_user_confpassword").val();
		var goodPasswordSize = $("#new_user_password").val().length >= 6;
		return goodCredentials && goodPasswordSize;
	});
});
</script>
<section>				
    <div id="container_demo" >
        <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
        <a class="hiddenanchor" id="toregister"></a>
        <a class="hiddenanchor" id="tologin"></a>
        <div id="wrapper">
			<div id="login" class="animate form">
			    #{form @Application.connectUser(), id:'form_login'} 
			        <h1>Connexion</h1> 
			        <p> 
			            <label for="user_email" class="uname" data-icon="u" > Votre email </label>
			            <input id="user_email" name="user_email" required="required" type="email" placeholder="mymail@iut.univ-paris8.fr"/>
			        </p>
			        <p> 
			        	<label for="user_password" class="youpasswd" data-icon="p"> Votre mot de passe </label>
			        	<input id="user_password" name="user_password" required="required" type="password" placeholder="eg. X8df!90EO" /> 
			        </p>
			        <p class="keeplogin"> 
						<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
						<label for="loginkeeping">Keep me logged in</label>
					</p>
			        <p class="login button"> 
			        	<input type="submit" value="Login" /> 
					</p>
			        <p class="change_link">
						Pas encore membre ?
						<a href="#toregister" class="to_register">Inscription</a>
					</p>
				#{/form}
			</div>

			<div id="register" class="animate form">
				#{form @Application.createUser(), id:'form_register', enctype:'multipart/form-data'}
				    <h1> Inscription </h1> 
				    <p> 
				        <!-- <label for="new_user_lastname" class="uname" data-icon="u"> Votre nom </label> -->
				        <input id="new_user_lastname" name="userToCreate.lastNameUser" required="required" type="text" placeholder="Nom de famille" />
				        <!-- <label for="new_user_firstname" class="uname" data-icon="u"> Votre pr&eacute;nom </label> -->
				        <input id="new_user_firstname" name="userToCreate.firstNameUser" required="required" type="text" placeholder="Prénom" />
				    </p>
				    <p> 
				        <!-- <label for="new_user_email" class="youmail" data-icon="e" > Votre email </label> -->
				        <input id="new_user_email" name="userToCreate.emailUser" type="email" readonly="readonly" value="@iut.univ-paris8.fr"/> 
				    </p>
				    <p> 
				        <!-- <label for="new_user_password" class="youpasswd" data-icon="p"> Votre mot de passe </label>  -->
				        <input id="new_user_password" name="userToCreate.passwordUser" required="required" type="password" placeholder="Mot de passe"/> 
				        <!-- <label for="new_user_confpassword" class="youpasswd" data-icon="p"> Confirmation mot de passe </label>  -->
				        <input id="new_user_confpassword" name="user_confpassword" required="required" type="password" placeholder="Confirmation"/>
				    </p>
				    <!-- <p> 
				        <label for="new_user_avatar" class="youpasswd"> Avatar </label>
				        <input id="new_user_avatar" name="user_avatar" type="file" accept="image/*"/>
				    </p> -->
				    <p> 
				        <label for="new_user_categorie"> Je suis un(e) </label>
				        <select name="user_categorie" id="new_user_categorie">
							<option value="teacher">Enseignant(e)</option>
							<option value="student">Etudiant(e)</option>
						</select>
						<select class="student-information" name="user_formation" id="new_user_formation">
							 <option disabled  selected="selected" value=""><b>Formation</b></option>
							#{list listFormation, as:'formation'}
								<option value="${formation.id}">${formation.libelleFormation}</option>
							#{/list}
						</select>
				    <p class="signin button"> 
						<input type="submit" id="createUser" value="Sign up"/> 
					</p>
				    <p class="change_link">  
						D&eacute;j&agrave; membre ?
						<a href="#tologin" class="to_register"> Se connecter </a>
					</p>
				#{/form}
			</div>
		</div>
	</div>  
</section>
      #{if flash.success}
          <div class="alert span3 alert-success"">${flash.success}</div>
      #{/if}

      #{if flash.error}
    	  <div class="alert span3 alert-danger">${flash.error}</div>
      #{/if}
</div>
<div class="span3"></div>